<template>
  <div>
    <el-row>
      <!-- 用户列表搜索表单 开始 -->
      <el-col :span="24">
        <el-form :inline="true" :model="searchItem">
          <el-form-item label="物料编号">
            <el-input v-model="searchItem.itemNo" placeholder="物料编号" />
          </el-form-item>
          <el-form-item label="物料名称">
            <el-input v-model="searchItem.itemName" placeholder="物料名称" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchItem.status" placeholder="全部" clearable>
              <el-option label="全部" value="0" />
              <el-option label="正常" value="1" />
              <el-option label="禁用" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="类别">
            <el-select
              v-model="searchItem.itemCatId"
              placeholder="类别"
              clearable
            >
              <el-option label="全部" value="0" />
              <el-option
                v-for="itemCat in itemCats"
                :label="itemCat.itemCatName"
                :value="itemCat.itemCatId"
                :key="itemCat.itemCatId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- 搜索表单 结束 -->
    </el-row>
    <el-row>
      <!-- 用户列表功能按钮 开始 -->
      <el-col :span="24">
        <el-button style="margin: 5px 5px" type="primary" @click="editSelection"
          ><el-icon><EditPen /></el-icon>编辑</el-button
        >
        <el-button style="margin: 5px 5px" type="danger"
          ><el-icon><Delete /></el-icon>删除</el-button
        >
        <el-button
          @click="dialogSaveItemVisible = true"
          style="margin: 5px 5px"
          type="success"
          ><el-icon><Plus /></el-icon>新增</el-button
        >
      </el-col>
      <!-- 功能按钮 结束 -->
    </el-row>
    <el-row>
      <el-col :span="24">
        <!--物料列表 在el-table中通过属性data绑定我们要显示的列表数据 -->
        <el-table
          :data="items"
          max-height="800"
          style="width: 100%"
          :stripe="true"
          :border="true"
          :fit="true"
          ref="itemTable"
        >
          <!-- 这里写列 -->
          <!-- type定义为selection,这一列会显示为复选框，自动实现全选功能 -->
          <el-table-column type="selection" />
          <!-- prop绑定要显示的属性的名字，label绑定列名 -->
          <el-table-column prop="itemNo" label="编号" />
          <el-table-column prop="itemName" label="名称" />
          <el-table-column prop="itemSpecifications" label="型号" />
          <el-table-column prop="unit.unitName" label="单位" />
          <el-table-column prop="itemCat.itemCatName" label="分类" />
          <el-table-column prop="itemName" label="是否启用">
            <template #default="scope">
              <el-tag
                class="ml-2"
                v-if="scope.row.itemStatus == 1"
                type="success"
                >启用</el-tag
              >
              <el-tag class="ml-2" v-else type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="itemName" label="安全库存">
            <template #default="scope">
              <el-tag
                class="ml-2"
                v-if="scope.row.safeStock == 1"
                type="success"
                >是</el-tag
              >
              <el-tag class="ml-2" v-else type="danger">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <!-- 这里写的内容会放在默认的插槽中 -->
            <template #default="scope">
              <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格结束 -->
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <!-- 物料列表分页栏 -->
        <el-pagination
          background
          :page-size="limit"
          :total="total"
          layout="prev, pager, next, jumper, ->, total"
          @currentChange="handlerCurrentChange"
        ></el-pagination>
      </el-col>
    </el-row>

    <!-- 新增物料的弹窗 开始 -->
    <el-dialog v-model="dialogSaveItemVisible" width="50%" title="新增物料">
      <el-form :model="newItem">
        <el-row :gutter="2">
          <el-col :span="9">
            <el-form-item label="物料编号" :label-width="formLabelWidth">
              <el-input v-model="newItem.itemNo" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="success" @click="genNewNo">生成</el-button>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料名称" :label-width="formLabelWidth">
              <el-input v-model="newItem.itemName" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="规格型号" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                :rows="2"
                v-model="newItem.itemSpecifications"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="物料单位" :label-width="formLabelWidth">
              <el-select
                :label-width="formLabelWidth"
                placeholder="单位"
                v-model="newItem.unitId"
              >
                <el-option
                  v-for="unit in units"
                  :key="unit.unitId"
                  :value="unit.unitId"
                  :label="unit.unitName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料分类" :label-width="formLabelWidth">
              <el-select
                :label-width="formLabelWidth"
                placeholder="分类"
                v-model="newItem.itemCatId"
              >
                <el-option
                  v-for="itemCat in itemCats"
                  :key="itemCat.itemCatId"
                  :value="itemCat.itemCatId"
                  :label="itemCat.itemCatName"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否启用" :label-width="formLabelWidth">
              <el-radio-group v-model="newItem.itemStatus" class="ml-4">
                <el-radio :label="1" size="large">启用</el-radio>
                <el-radio :label="2" size="large">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安全库存" :label-width="formLabelWidth">
              <el-radio-group
                v-model="newItem.safeStock"
                @change="safeStockChange"
                class="ml-4"
              >
                <el-radio :label="1" size="large">是</el-radio>
                <el-radio :label="2" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <el-row :gutter="2">
              <el-col :span="12">
                <el-form-item label="最小库存" :label-width="formLabelWidth">
                  <el-input-number v-model="newItem.minSafeStock" :min="1" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最大库存" :label-width="formLabelWidth">
                  <el-input-number v-model="newItem.maxSafeStock" :min="1" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
        <el-row>
          <el-col :span="24">
            <el-form-item label="物料备注" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                :rows="2"
                v-model="newItem.itemNotes"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <!-- 将显示窗体的属性修改为false的同时，将newUser置空 -->
          <el-button
            @click="
              dialogSaveItemVisible = false;
              this.newItem = {};
            "
            >取消</el-button
          >
          <el-button type="primary" @click="doSaveItem"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加用户弹窗组件 结束 -->
  </div>
</template>

<script>
import itemCatHttp from "../../../api/item-cat.js";
import itemHttp from "../../../api/item.js";
import unitHttp from "../../../api/unit.js";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      searchItem: {}, // 保存搜索数据的item对象
      itemCats: [], // 物料类别列表
      currentPage: 1, //当前页码
      total: 0, // 最大页码
      limit: 10, // 每页大小
      items: [], // 物料数据列表
      units: [], //所有的计量单位列表
      dialogSaveItemVisible: true, // 新增物料的弹窗标志
      newItem: { itemStatus: 1, safeStock: 2 }, // 保存新增的物料对象
      activeNames: [], // 安全库存设置
    };
  },
  methods: {
    /**
     * 保存物料
     */
    doSaveItem() {
      console.log(this.newItem);
      itemHttp.saveItem(this.newItem, (res) => {
        if (res.code == 200) {
          ElMessage({
            message: "添加成功",
            type: "success",
          });
          // 关闭窗体
          this.dialogSaveItemVisible = false;
          this.newItem = { itemStatus: 1, safeStock: 2 };
          // 刷新数据
          this.loadItem();
        } else if (res.code == 300) {
          ElMessage.error(res.msg);
        } else {
          ElMessage.error("添加失败");
        }
      });
    },
    /**
     * 生成最新物料编号
     */
    genNewNo() {
      itemHttp.getNewNo((res) => {
        this.newItem.itemNo = res.data;
      });
    },
    /**
     * 安全库存按钮发生变化时触发
     */
    safeStockChange(value) {
      if (value == "1") {
        this.activeNames = ["1"];
      } else {
        this.activeNames = [];
      }
    },
    /**
     * 加载所有的计量单位
     */
    loadUnits() {
      unitHttp.queryAll((res) => {
        this.units = res.data;
      });
    },
    /**
     * 搜索按钮事件
     */
    doSearch() {
      this.loadItem();
    },
    // 翻页事件处理
    handlerCurrentChange(value) {
      this.currentPage = value;
      this.loadItem();
    },
    /**
     * 加载物料
     */
    loadItem() {
      itemHttp.queryByPage(
        this.searchItem,
        this.currentPage,
        this.limit,
        (res) => {
          console.log(res);
          this.items = res.data.list;
          this.total = res.data.total;
        }
      );
    },
    /**
     * 加载所有的物料类别列表
     */
    loadItemCat() {
      itemCatHttp.queryAll((res) => {
        console.log(res);
        this.itemCats = res.data;
        this.total = res.data.pages;
      });
    },
  },
  mounted() {
    this.loadItemCat();
    this.loadItem();
    this.loadUnits();
  },
};
</script>

<style>
</style>